<template>
	<div class="main-div">
		<el-form labelPosition="right" class="login-box" :model="logins" label-width="70px" :rules="rules" ref="login">
			<h3 class="login-title">运营管理系统</h3>
			<el-form-item prop="mobile" label="账号">
				<el-input size="small" placeholder="请输入账号" v-model="logins.mobile" @keyup.native.enter="doLogin" clearable></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input size="small" placeholder="请输入密码" show-password v-model="logins.password" @keyup.native.enter="doLogin"
				 clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="验证码" prop="code">
				<el-row>
					<el-input size="small" style="width:130px" @keyup.native.enter="doLogin" placeholder="请输入验证码" v-model="logins.code"
					 clearable></el-input>
					<img @click="getImgUrl" class="codeValideImg" :src="fkzImgsSrc" alt="图形验证码" />
				</el-row>
			</el-form-item>
			<el-form-item label prop>
				<el-button size="small" style="width: 100%" type="primary" @click="doLogin" :loading="loading">{{loading ? '登录中...' : '立即登录'}}</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import uuidv1 from 'uuid/v1'
	import {_login} from '../../http/api.js'
	export default {
		data() {
			return {
				fkzImgsSrc: '',
				loading: false,
				logins: {
					mobile: '',
					password: '',
					code: '',
					uuid: '',
				},
				rules: {
					mobile: [{
						required: true,
						message: '请输入账号'
					}],
					password: [{
						required: true,
						message: '请输入密码'
					}],
					code: [{
						required: true,
						message: '请输入验证码'
					}],
				}
			}
		},
		created() {
			this.getImgUrl()
		},
		methods: {
			//获取验证码
			getImgUrl() {
				this.logins.uuid = uuidv1()
				let codeImgVald = `${process.env.VUE_APP_BASE_URL}/cms/unAuth/login/captcha.jpg`
				this.fkzImgsSrc = `${codeImgVald}?uuid=${this.logins.uuid}`
			},
			//登录
			doLogin() {
				this.$refs.login.validate((valid) => {
					if (valid) {
						this.loading = true
						_login(this.logins).then(res => {
							console.log("res",res.data)
							this.loading = false
							this.$store.commit('setToken', res.data.token)
							this.$store.commit('setUserInfo', res.data.user)
							//获取菜单权限
							this.doMenu(res.data.user)
						}).catch(err => {
							this.loading = false
							this.getImgUrl()
						})
					}
				})
			},
			//获取当前用户的菜单权限
			doMenu() {
				this.loading = true
				this.$store.dispatch('updateMenuList').then(() => {
					this.loading = false
					this.$router.replace('/home')
					this.$message.success('登录成功')
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.main-div {
		width: 100%;
		height: 100%;
		background-image: url(../../assets/images/login_bg3.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	.login-box {
		border: 1px solid #DCDFE6;
		width: 350px;
		padding: 40px;
		position: absolute;
		top: 50%;
		left: 50%;
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		box-shadow: 0 0 25px #909399;
	}

	.login-title {
		text-align: center;
		margin: 0 auto 40px auto;
		color: #E9EEF3;
	}

	.codeValideImg {
		position: absolute;
		width: 118px;
		height: 40px;
		margin-left: 5px;
	}
	/deep/ .el-form-item__label{
		color: #E9EEF3;
	}
</style>
